import { useState, useEffect } from 'react'
import { Link } from 'react-router-dom'
import { getNew, getIndexGoods, getGroupon } from '../request/app'
import { Tabs } from 'antd-mobile'
import '../assets/css/home.css'

function Home () {
  let [newlist, setNewList] = useState([])
  let [listUrl, setListUrl] = useState([
    {
      id: 1,
      img: require('../assets/img/home/限时抢购.png'),
      msg: '限时秒杀'
    },
    {
      id: 2,
      img: require('../assets/img/home/畅销商品.png'),
      msg: '畅销商品'
    },
    {
      id: 3,
      img: require('../assets/img/home/品质大牌.png'),
      msg: '品质大牌'
    },
    {
      id: 4,
      img: require('../assets/img/home/限时抢购.png'),
      msg: '小U自营'
    },
    {
      id: 5,
      img: require('../assets/img/home/积分兑换.png'),
      msg: '积分商城'
    }
  ])
  let [goodslist, setGoodsList] = useState([])
  let [hostslist, setHostsList] = useState([])
  let [shopslist, setShopsList] = useState([])
  let [foodslist, setFoodsList] = useState([])
  let [grouponlist, setGrouponList] = useState([])

  //生命周期挂载完成
  useEffect(() => {
    //调用新人专享接口获取数据
    getNew().then(res => {
      console.log(res, '新人专享响应')
      if (res.code == 200) {
        setNewList([...res.list])
      }
    })

    //调用首页商品详情
    getIndexGoods().then(res => {
      console.log(res, '首页商品列表响应')
      if (res.code == 200) {
        setGoodsList([...res.list[0].content])
        setHostsList([...res.list[1].content])
        setShopsList([...res.list[2].content])
        setFoodsList([...res.list[3].content])
      }
    })

    //调用万人团接口
    getGroupon().then(res => {
      console.log(res, '万人团响应')
      if (res.code == 200) {
        setGrouponList([...res.list])
      }
    })
  }, [])

  return (
    <div className='homeCom'>
      {/* 头部 */}
      <header>
        <div className='title'>
          <img
            src={require('../assets/img/home/logo.png')}
            alt=''
            className='im1'
          />
          <div className='seachBox'>
            <input type='text' placeholder='搜索商品' />
            <button>搜索</button>
          </div>
          <img
            src={require('../assets/img/home/dizi.png')}
            alt=''
            className='im2'
          />
        </div>
      </header>

      {/* 新人专享 */}
      <div className='newBox'>
        <div className='topBox'>
          <div>
            <span>新人专享</span>
            <img src={require('../assets/img/home/time.png')} alt='' />
          </div>
          <button>查看全部</button>
        </div>
        <div className='centerBox'>
          <div className='titleBox'>
            <div>1重礼</div>
            <span>信任特价商品专区</span>
            <p>(限量提供先到先得)</p>
          </div>
          <div className='bigBox'>
            {newlist.map(item => {
              return (
                <div className='shopBox' key={item.id}>
                  <img src={item.img} alt='' />
                  <span>￥{item.price}</span>
                  <br />
                  <s>￥{item.market_price}</s>
                  <img
                    src={require('../assets/img/home/cart.png')}
                    alt=''
                    className='cart'
                  />
                </div>
              )
            })}
          </div>
        </div>
        <div className='bottomBox'>
          <div className='titleBox'>
            <div>2重礼</div>
            <span>信任特价商品专区</span>
            <p>(限量提供先到先得)</p>
          </div>
          <div className='quanBox'>
            <img
              src={require('../assets/img/home/优惠券.png')}
              alt=''
              className='im1'
            />
            <img
              src={require('../assets/img/home/优惠券领取.png')}
              alt=''
              className='im2'
            />
          </div>
        </div>
      </div>

      {/* 列表分类 */}
      <div className='listBox'>
        {listUrl.map(item => {
          return (
            <div key={item.id}>
              <img src={item.img} alt='' />
              <br />
              <span>{item.msg}</span>
            </div>
          )
        })}
      </div>

      {/* 抢购商品 */}
      <div className='timerBox'>
        <div className='topBox'>
          <div>
            <span>超级秒杀</span>
            <img src={require('../assets/img/home/time.png')} alt='' />
          </div>
        </div>
        <div className='msBox'>
          <img src={require('../assets/img/home/shop02.png')} alt='' />
          <div className='detailBox'>
            <div>7.9折</div>
            <p>溪木原山茶花洁面精乳选太行山最优质</p>
            <span>￥29.9</span>
            <s>69.9</s>
            <img src={require('../assets/img/home/抢购按钮.png')} alt='' />
          </div>
        </div>
      </div>
      {/* 限时秒杀 */}
      <div className='killBox'>
        <div className='centerBox'>
          <div className='titleBox'>
            <div>限时秒杀</div>
            <span>信任特价商品</span>
            <p>(限量先到先得)</p>
          </div>
          {/* 万人团 */}
          <div className='bigBox'>
            {grouponlist.map(item => {
              return (
                <div className='shopBox' key={item.id}>
                  <img src={item.img} alt='' />
                  <span>￥{item.price}</span>
                  <br />
                  <s>￥{item.market_price}</s>
                  <img
                    src={require('../assets/img/home/cart.png')}
                    alt=''
                    className='cart'
                  />
                </div>
              )
            })}
          </div>
        </div>
      </div>

      {/* 列表切换 */}
      <Tabs
        style={{
          '--title-font-size': '0.2rem',
          '--active-title-color': '#FF6040',
          '--active-line-color': '#FF6040',
          '--active-line-height': '0.05rem'
        }}
        className='tabsBox'
      >
        <Tabs.Tab title='精选' key='1'>
          {/* 商品列表 */}
          <div className='goodsBox'>
            <ul>
              {goodslist.map(item => {
                return (
                  // 跳转到详情页动态传参
                  <li key={item.id}>
                    <img src={item.img} alt='' />
                    <div className='textBox'>
                      <img src={require('../assets/img/home/打折标签.png')} />
                      <p>{item.goodsname}</p>
                      <span>￥{item.price}</span>
                      <s>￥{item.market_price}</s>
                      <Link to={`/detail/${item.id}`}>
                        <button>加入购物车</button>
                      </Link>
                    </div>
                  </li>
                )
              })}
            </ul>
          </div>
        </Tabs.Tab>
        <Tabs.Tab title='时尚' key='2' className='tabBox'>
          {/* 商品列表 */}
          <div className='goodsBox'>
            <ul>
              {hostslist.map(item => {
                return (
                  // 跳转到详情页动态传参
                  <li key={item.id}>
                    <img src={item.img} alt='' />
                    <div className='textBox'>
                      <img src={require('../assets/img/home/打折标签.png')} />
                      <p>{item.goodsname}</p>
                      <span>￥{item.price}</span>
                      <s>￥{item.market_price}</s>
                      <Link to={`/detail/${item.id}`}>
                        <button>加入购物车</button>
                      </Link>
                    </div>
                  </li>
                )
              })}
            </ul>
          </div>
        </Tabs.Tab>
        <Tabs.Tab title='实惠' key='3'>
          {/* 商品列表 */}
          <div className='goodsBox'>
            <ul>
              {shopslist.map(item => {
                return (
                  // 跳转到详情页动态传参
                  <li key={item.id}>
                    <img src={item.img} alt='' />
                    <div className='textBox'>
                      <img src={require('../assets/img/home/打折标签.png')} />
                      <p>{item.goodsname}</p>
                      <span>￥{item.price}</span>
                      <s>￥{item.market_price}</s>
                      <Link to={`/detail/${item.id}`}>
                        <button>加入购物车</button>
                      </Link>
                    </div>
                  </li>
                )
              })}
            </ul>
          </div>
        </Tabs.Tab>
        <Tabs.Tab title='进口' key='4'>
          {/* 商品列表 */}
          <div className='goodsBox'>
            <ul>
              {foodslist.map(item => {
                return (
                  // 跳转到详情页动态传参
                  <li key={item.id}>
                    <img src={item.img} alt='' />
                    <div className='textBox'>
                      <img src={require('../assets/img/home/打折标签.png')} />
                      <p>{item.goodsname}</p>
                      <span>￥{item.price}</span>
                      <s>￥{item.market_price}</s>
                      <Link to={`/detail/${item.id}`}>
                        <button>加入购物车</button>
                      </Link>
                    </div>
                  </li>
                )
              })}
            </ul>
          </div>
        </Tabs.Tab>
      </Tabs>
    </div>
  )
}
export default Home
